<template>
  <div class="header">
    <div class="top">
      <img class="t-left" :src="seller.avatar">
      <div class="t-right">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          {{seller.description}}/{{seller.deliveryTime}}分钟抵达
        </div>
        <div v-if='seller.supports' class="jian">
          <span class="icon" :class="iconclass[seller.supports[0].type]"></span>
          <span class="txt">{{seller.supports[0].description}}</span>
        </div>
        <div v-if='seller.supports' class="jiannum" @click="change(true)">
          {{seller.supports.length}}个 >
        </div>
      </div>
    </div>
    <div class="botton" @click="change(true)">
      <span class="icon"></span>
      <span class="txt">{{seller.bulletin}}</span>
      <span class="txt1">></span>
    </div>
    <div class="bg">
      <img :src="seller.avatar">
    </div>
    <div class="bulletin" v-show="isbulletin">
      <div class="main">
        <div class="maininfo">
          <div class="name">{{seller.name}}</div>
          <Star class="star" :size='48' :score="seller.score"></Star>
          <div class="discount">
            <div class="title">
              <div class="line"></div>
              <p class="name">优惠信息</p>
              <div class="line"></div>
            </div>
            <ul class="info">
              <li class="info-item" :key='index' v-for="(support,index) in seller.supports" >
                <span class="icon" :class="iconclass[support.type]"></span>
                <span class="txt">{{support.description}}</span>
              </li>
            </ul>
          </div>
          <div class="discount">
            <div class="title">
              <div class="line"></div>
              <p class="name">商家公告</p>
              <div class="line"></div>
            </div>
            <p class="info bulletintxt">{{seller.bulletin}}</p>
          </div>
        </div>
      </div>
      <div class="close" @click="change(false)">x</div>
    </div>
  </div>
</template>

<script>
import Star from './star.vue'

export default {
  name: 'Header',
  props: {
    seller: {
      type:Object
    }
  },
  components: {
    Star
  },
  data () {
    return {
      iconclass:['decrease','discount','special','invoice','guarantee'],
      isbulletin:false
    }
  },
  methods: {
    change (ischange) {
      this.isbulletin = ischange
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import '../common/stylus/index.styl'

  .header
    position relative
    background rgba(7,17,27,0.5)
    color rgb(255,255,255)
    .top
      padding 24px 12px 18px 24px
      display flex
      .t-left
        width 64px
        height 64px
        border-radius 4px
        margin-right 16px
      .t-right
        position relative
        flex 1
        .title
          margin-bottom 8px
          display flex
          .brand
            width 30px
            height 18px
            bgImg('brand')
            margin-right 6px
          .name
            font-size 16px
            font-weight bold
            line-height 18px
        .description
          font-size 12px
          font-weight 200
          line-height 12px
          margin-bottom 10px
        .jian
          display flex
          align-items center
          .icon
            width 12px
            height 12px
            margin-right 4px
            &.decrease
              bgImg('decrease_1')
            &.discount
              bgImg('discount_1')
            &.guarantee
              bgImg('guarantee_1')
            &.invoice
              bgImg('invoice_1')
            &.special
              bgImg('special_1')
          .txt
            font-size 10px
            font-weight 200
            line-height 12px
        .jiannum
          position absolute
          padding 7px 8px
          background rgba(0,0,0,0.2)
          font-size 10px
          color rgb(255,255,255)
          font-weight 200
          line-height 12px
          bottom 0
          right 0
          border-radius 14px
    .botton
      padding 0 12px
      height 28px
      background rgba(7,17,27,0.2)
      display flex
      align-items center
      .icon
        flex 0 0 22px
        width 22px
        height 12px
        margin-right 4px
        bgImg('bulletin')
      .txt
        margin-left 4px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        font-size 10px
        font-weight 200
        line-height 28px
      .txt1
        margin-left 4px
    .bg
      position absolute
      height 134px
      top 0
      left 0
      width 100%
      height 100%
      overflow hidden
      z-index -1
      filter blur(10px)
      img 
        width 100%
        height 150%
    .bulletin
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(7,17,27,0.8)
      z-index 1
      overflow-y auto
      .main 
        min-height 100%
        .maininfo
          padding-bottom 64px
          padding-top 64px
          .name
            font-size 16px
            font-weight 700
            color rgb(255,255,255)
            line-height 16px
            text-align center
            margin-bottom 16px
          .star
            margin-bottom 28px
            text-align center
          .discount
            margin 0 36px 24px 36px
            .title
              display flex
              align-items center
              margin-bottom 24px
              .name
                font-size 14px
                font-weight 700
                color #ffffff
                line-height 14px
                margin 0 12px
              .line
                flex 1
                height 1px
                background rgba(255,255,255,0.2)
            .info
              margin 0 12px
              .info-item
                height 16px
                display flex
                align-items center
                margin-bottom 12px
                .icon
                  width 16px
                  height 16px
                  margin 0 6px 0 0;
                  &.decrease
                    bgImg('decrease_1')
                  &.discount
                    bgImg('discount_1')
                  &.guarantee
                    bgImg('guarantee_1')
                  &.invoice
                    bgImg('invoice_1')
                  &.special
                    bgImg('special_1')
                .txt
                  font-size 12px
                  font-weight 200
                  color #ffffff
                  line-height 12px
            .bulletintxt
              font-size 12px
              font-weight 200
              color #ffffff
              line-height 24px
      .close
        font-size 32px
        color rgba(255,255,255,0.5)
        margin-top -64px
        text-align center
</style>

